<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混入</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--张三-->
    <span>{{message}}</span>
    <!--混入的第三者-->
    <span>{{name}}</span>
</div>


<script>

    const myMixin = {
        created() {
            alert("同名钩子函数,混入钩子先执行")
            this.sayHello()
        },
        mounted() {
            var myOption = this.$options.myOption;
            console.log(this.$options)
            alert(myOption)
        },
        methods: {
            sayHello() {
                alert("同名选项,混入数据后执行")
            }
        },
        data() {
            return {
                message: "李四",
                name: "混入的第三者"
            }
        },
    };

    new Vue({
        el: '#app',
        myOption: "hello全局混入",
        data: {
            message: "张三"
        },
        mixins: [myMixin],
        methods: {
            sayHello() {
                alert("优先执行，同名选项，组件数据优先混入数据")
            }
        },
        created() {
            alert("同名钩子函数,组件钩子后执行")
        }
    })
    // 注册混入
    // var Component = Vue.extend({
    //         mixins: [myMixin]
    //
    //     }
    // );
    //new Component();
</script>
</body>
</html>
